<template>
  <keep-alive>
    <component :is="comp" @change:fpar="(v) => (headOpacity = v)" />
  </keep-alive>
  <Head v-show="!videoFullscreen && headOpacity !== 0" v-model="homeTab" :style="{ opacity: headOpacity }"></Head>
</template>

<script setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { useNavStore } from '@/store/nav'
import Head from '@/components/home/Head.vue'
import Follow from './mobile/Follow.vue'
import Foryou from './mobile/Foryou.vue'

const navStore = useNavStore()
const { homeTab, atForyouTab, atFollowTab } = storeToRefs(navStore)

const appStore = useAppStore()
const { videoFullscreen } = storeToRefs(appStore)

const headOpacity = ref(1)

const comp = computed(() => {
  const atForyou = atForyouTab.value
  const atFollow = atFollowTab.value
  if (atForyou) return Foryou
  if (atFollow) return Follow
  return null
})
</script>
